<template>
  <el-container>
    <el-header>
      <el-form :inline="true" style="margin-top: 20px">
        <el-input label="关键字" v-model="keyword" placeholder="关键字" clearable @clear="clearConditions" >
          <el-button slot="append" type="primary" icon="el-icon-search" v-on:click="searchData"></el-button>
        </el-input>
      </el-form>
    </el-header>
    <el-main>
      <el-table height="100%" :data="dataTable.result" border style="width: 100%" highlight-current-row>
        <el-table-column prop="icon" width="40" header-align="center" align="center">
          <template slot-scope="scope">
            <i :class="scope.row.icon"></i>
          </template>
        </el-table-column>
        <el-table-column prop="appId" label="代码/名称" width="200">
          <template slot-scope="scope">
            {{ scope.row.appId }}
            <br>
            <el-button type="text" @click="view(scope.row)" :title="scope.row.appName">{{ scope.row.appName }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="应用程序路径/安全密钥" min-width="300" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.fullPath }}
            <br>
            <el-button type="text" @click="getSecret(scope.row)">查看密钥</el-button>
          </template>
        </el-table-column>
        <el-table-column label="启用" width="80">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enabled" @change="changeEnabled(scope.row)" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </template>
        </el-table-column>
        <!-- <el-table-column label="安全密钥" width="80" header-align="center" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="getSecret(scope.row)">查看密钥</el-button>
          </template>
        </el-table-column> -->
        <el-table-column prop="createTime" label="创建时间/修改时间" header-align="center" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.createTime }}<br>
            {{ scope.row.updateTime }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" width="80" fixed="right">
          <template slot="header">
            <el-button type="text" icon="el-icon-plus" @click="add" title="新增"></el-button>
            <el-button type="text" icon="el-icon-refresh" @click="query" title="刷新"></el-button>
          </template>
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-edit" @click="edit(scope.row)" title="编辑"></el-button>
            <el-button type="text" icon="el-icon-delete" @click="remove(scope.row)" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-drawer :title="formTitle" :visible.sync="showEdit" @close="closeDialog" direction="rtl" size="30%">
        <template slot="title">
          <div>
            <el-button @click="showEdit = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
            <el-button v-if="!createNew" type="primary" @click="view(editItem)">模块管理</el-button>
          </div>
        </template>
        <el-container>
          <el-main>
            <el-form :model="editItem" label-width="100px">
              <el-form-item label="应用代码">
                <el-input v-model="editItem.appId" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="应用名">
                <el-input v-model="editItem.appName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="主机/IP">
                <el-input v-model="editItem.domain" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="端口号">
                <el-input v-model="editItem.port" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="ssl">
                <el-checkbox v-model="editItem.ssl">启用</el-checkbox>
              </el-form-item>
              <el-form-item label="主路径">
                <el-input v-model="editItem.path" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="图标">
                <mf-icon-list v-model="editItem.icon"></mf-icon-list>
              </el-form-item>
            </el-form>
          </el-main>
        </el-container>
      </el-drawer>
      <el-dialog title="密钥" :visible.sync="showSecret" width="400px" @closed="onClosed">
        <el-container>
          <el-main>
            <el-input v-model="currentItem.secretKey" disabled autocomplete="off">
              <el-button slot="append" icon="el-icon-refresh" @click="setSecret">刷新</el-button>
            </el-input>
          </el-main>
        </el-container>
      </el-dialog>
    </el-main>
    <el-footer>
      <el-pagination v-on:current-change="query" :current-page.sync="queryObject.pageIndex" :page-size="queryObject.pageSize" layout="total, prev, pager, next" :total="dataTable.rowCount" ></el-pagination>
    </el-footer>
  </el-container>
</template>
<script>
import {mapState, mapMutations, mapActions} from 'vuex';
const STORE_MODULE = {
  "name": "app",
  "state": [
    "queryObject",
    "dataTable"
  ],
  "mutations": [
    "selectItem",
    "setParameters"
  ],
  "actions": [
    "query",
    "create",
    "update",
    "delete",
    "toggle"
  ]
};
export default {
  data() {
    return {
      createNew: true,
      showSecret: false,
      showEdit: false,
      currentItem:{
        appId: null,
        secretKey: null
      },
      editItem: {
        appId: null,
        appName: null,
        domain: null,
        port: null,
        ssl: null,
        path: null,
        icon: null
      },
      keyword: null
    }
  },
  computed: {
    ...mapState(STORE_MODULE.name, STORE_MODULE.state),
    formTitle(){
      return this.createNew ? "新建":"编辑";
    }
  },
  mounted() {
    this.query();
  },
  methods: {
    ...mapMutations(STORE_MODULE.name, STORE_MODULE.mutations),
    ...mapActions(STORE_MODULE.name, STORE_MODULE.actions),
    searchData(){
      this.queryObject.parameters.keyword = this.keyword;
      this.query();
    },
    closeDialog(){
    },
    resetForm(){
      for(var name in this.editItem)
        this.editItem[name] = null;
    },
    add(){
      this.resetForm();
      this.editItem.ssl = false;
      this.showEdit = true;
      this.createNew = true;
    },
    edit(row){
      this.resetForm();
      for(var name in this.editItem)
        this.editItem[name] = row[name];
      this.showEdit = true;
      this.createNew = false;
    },
    save(){
      let task = this.createNew ? this.create(this.editItem) : this.update(this.editItem);
      task.then((response) => {
        if (response.success){
          alert("保存成功","消息","success", ()=>{this.showEdit = false; this.createNew = true;});

        }
      });
    },
    clearConditions(){
      if (this.queryObject.parameters.keyword != this.keyword) this.searchData();
    },
    remove(row){
      confirm('确认要删除['+row.appName+']吗？请谨慎操作！', '警告', 'warning', ()=>{

        this.delete(row.appId).then((response) => {
          if (!response.success) {
            let msg = response.message || "操作失败";
            alert(msg,"消息","error");
          }
        });
      });
    },
    /* switch */
    changeEnabled(item) {
      this.toggle(item.appId)
        .then(r => {

        });
    },
    view(row){
      this.$router.push({name:'appitem', params:{id:row.appId} })
    },
    getSecret(row){
      this.currentItem.appId = row.appId;
      this.$service.app.getSecret({params: {id: row.appId }}).then(r => {
        if (r.success){
          this.showSecret = true;
          this.currentItem.secretKey = r.data;
        }
      });
    },
    setSecret(){
      confirm('刷新后，原有接入认证将不可用，请反复确认后，谨慎操作！', '警告', 'warning', ()=>{

        this.$service.app.newSecret({params: {id: this.currentItem.appId }}).then(r => {
          if (r.success){
            this.currentItem.secretKey = r.data;
          }
        });
      });
    },
    onClosed(){
      this.currentItem = {
        appId: null,
        secretKey: null
      };
    }
  }
}
</script>
